//1.首先在node环境下下载gulp第三方包,然后引入gulp
const gulp=require('gulp');
/*
	2.知道gulp的方法
		1.gulp.src('需要打包的文件地址')
			返回值是一个二进制流,可以继续用别的方法
		2.gulp.pipe(需要操作的事情) 参数一般为其他包里面的方法
		3.gulp.dest()  参数是一个文件夹名称,不填参数也可以,意思是将压缩好的代码存入到这个文件里面,不填写参数就自动创建这个文件夹
		4.gulp.parallel(任务1,任务2,任务3......)  多任务同时进行的方法
		5.gulp.series(任务1,任务2,任务3......)  单个任务逐个进行的方法
		6.gulp.watch(文件目录,执行方法) 用来监控文件的变化的方法
*/ 
//3.2  引入需要给兼容的css样式添加前缀的第三方模块
const	autoprefixer = require('gulp-autoprefixer')
//3.3  引入给css压缩的第三方模块
const	cssmin = require('gulp-cssmin')

//4.1  引入将ES6语法转换成ES5语法的第三方模块
//在安装这个之前,先要安装@babel/core和@babel/preset-env两个模块
const	babel = require('gulp-babel')
//4.2	引入压缩js文件的第三方模块
const uglify = require('gulp-uglify')

//5.1	引入压缩html文件的第三方模块
const	htmlmin = require('gulp-htmlmin')

//8.	引入删除文件夹的第三方模块
const	del = require('del')

//9.1	引入一个配置服务器的第三方模块
const	webserver = require('gulp-webserver')

/*
9.2	使用自定义域名的方法
	windows>c:>windows>system32>drivers>etc>hosts  找到hosts这个文件打开,在最后一行加上
	127.0.0.1     自己定义的域名
	
	
*/ 

//3.打包css文件
const cssHandler =()=>{
	return gulp.src('./src/css/*.css') //找到需要打包的css文件,所有的源码都放在scr的文件夹里面
			   .pipe(autoprefixer()) //给需要兼容的代码添加前缀
			   .pipe(cssmin())  //压缩css代码,参数写在package,json文件里面
			   .pipe(gulp.dest('./dist/css')) //压缩过的文件都放到语义化的dist的文件里面的css文件夹里面
}	   
//4.打包js的方法
const jsHandler=()=>{
	return gulp.src('./src/js/*.js') //找到所有需要打包的js文件
			   .pipe(babel({
					presets: ['@babel/env']  //将ES6语法转换为ES5语法
			   }))
			   .pipe(uglify())  //压缩js文件
			   .pipe(gulp.dest('./dist/js'))  //将压缩过的文件方法dist文件的js文件夹里面
}

//5.打包html文件的方法
const	htmlHandler=()=>{
	return gulp.src('./src/htmls/*.html')  //找到需要打包的html文件
		.pipe(htmlmin({		//对html文件的配置信息并压缩
			removeComments:true,	//是否移除注释
			removeAttributeQuotes: true,	//是否移除属性上的双引号
			collapseBooleanAttributes: true,	//是否将布尔值属性简写
			collapseWhitespace: true,	//是否移除空行
			minifyCSS: true,	//是否把html页面所写的css样式也去空格
			minifyJS: true,		//是否把写在html页面的js代码也去空格
}))
		.pipe(gulp.dest('./dist/htmls'))  //压缩好的文件放在文件夹里面
}
//6.复制移动imgs文件的方法
const	imgHandler=()=>{
		return gulp.src('./src/imgs/**')	//选中到imgs文件夹里面所有的文件
					.pipe(gulp.dest('./dist/imgs'))  //放入dist/imgs的文件夹里面
}
//7.复制移动lib文件的方法
const	libHandler = () => {
  return gulp.src('./src/lib/**')
             .pipe(gulp.dest('./dist/lib'))
}
//8.删除文件夹的方法
const	delHandler = () => {
  return del(['./dist'])	//这里删除了dist文件夹
}

//9.配置服务器的方法
const	serverHandler=()=>{
	return gulp.src('./dist')	//dist是作为上线的文件夹,以他为根目录配置服务器信息
		.pipe(webserver({	//对配置项进行配置
			host: 'localhost', // 域名, 可以自定义,不要用已经存在网站
			port:8888,	//端口号劲量不使用0~1023,在0~65535中间选择
			open:'./htmls/index1.html',	//默认打开的首页html文件,是以dist为根目录的文件
			livereload: true,	//浏览器是否自动刷新
			proxies:[	//对一个跨域请求配置信息
			{
				source:'/wty1',	//代理标识符
				target: 'http://localhost:80/wang/src/lib/php/denglu.php' //你要代理的地址
			},
			{
				source:'/wty2',	//代理标识符,每一个对象都是一个跨域的代理地址
				target: 'http://localhost:80/wang/src/lib/php/zhuce.php' //你要代理的地址
			},
		]
		}))
}

//10.自动监控文件的方法
const watchHandler = () => { //每个文件发生变化所执行的方法,更新文件,即源代码发生变化,对应的压缩文件也变化
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/htmls/*.html', htmlHandler)
  gulp.watch('./src/lib/**', libHandler)
  gulp.watch('./src/imgs/**', imgHandler)
}

//11.导出
module.exports.default = gulp.series(	//每一次在命令行输入gulp发生的变化
  delHandler,	//先删除存压缩文件的根目录
  gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler, libHandler),	//再次执行每一个压缩方法
  serverHandler,	//创建一个服务器
  watchHandler	//监控变化执行的函数
)